<script setup  name="comMenuBar">
import { ref,nextTick, onMounted } from 'vue';
import { useRouter, onBeforeRouteUpdate } from 'vue-router';
import { useAdmMenuLoading } from '@/stores/administrator';



const admMenuLoading = useAdmMenuLoading();
const router = useRouter();//路由实例
const menuList = ref(null);//菜单列表元素
const menuRecord = ref(0);//记录上一次点击的item
const  menuData = ref([//菜单item渲染的数据
            {
                icon: 'icon-jichugongzuo',
                text: '基础工作',
                route: '/administrator'
            },
            {
                icon: 'icon-likefill',
                text: '突出工作',
                route: '/administrator/outstandingWork'
            },
            {
                icon: 'icon-job-',
                text: '分数总览',
                route: '/administrator/scoreOverview'
            },
            {
                icon: 'icon-geren',
                text: '个人中心',
                route: '/administrator/user'
            }
])



//菜单item点击事件，处理改变item颜色,进行路由跳转,加载动画
const menuClick = (index) => {
    if(index === menuRecord.value) return;//防止重复点击
    for (let i = 0; i < menuList.value.children.length; i++) {
        menuList.value.children[i].classList.remove('activeMenu');
        if (index === i) {
            admMenuLoading.setMenuLoading(true);
            menuList.value.children[i].classList.add('activeMenu');//改变item颜色
            router.push(menuData.value[index].route);//进行路由跳转
            menuRecord.value = index;//记录上一次点击的item
        }
    }
};
//当切换路由时当等待组件加载完成后，关闭加载动画
onBeforeRouteUpdate(async (to, from, next) => {
    if (to.fullPath.includes("administrator/baseWork/proceed/detail")) {
        let index = 0;
        for (let i = 0; i < menuList.value.children.length; i++) {
            menuList.value.children[i].classList.remove('activeMenu');
            if (index === i) {
                admMenuLoading.setMenuLoading(true);
                menuList.value.children[i].classList.add('activeMenu');//改变item颜色
                menuRecord.value = index;//记录上一次点击的item
            }
        }

    }
    if(to.fullPath.includes("administrator/baseWork/finish/detail")) {
        let index = 0;
        for (let i = 0; i < menuList.value.children.length; i++) {
            menuList.value.children[i].classList.remove('activeMenu');
            if (index === i) {
                admMenuLoading.setMenuLoading(true);
                menuList.value.children[i].classList.add('activeMenu');//改变item颜色
                menuRecord.value = index;//记录上一次点击的item
            }
        }
    }
    if(to.fullPath.includes("administrator/outstandingWork/proceed/detail")) {
        let index = 1;
        for (let i = 0; i < menuList.value.children.length; i++) {
            menuList.value.children[i].classList.remove('activeMenu');
            if (index === i) {
                admMenuLoading.setMenuLoading(true);
                menuList.value.children[i].classList.add('activeMenu');//改变item颜色
                menuRecord.value = index;//记录上一次点击的item
            }
        }
    }
    if(to.fullPath.includes("administrator/outstandingWork/finish/detail")) {
        let index = 1;
        for (let i = 0; i < menuList.value.children.length; i++) {
            menuList.value.children[i].classList.remove('activeMenu');
            if (index === i) {
                admMenuLoading.setMenuLoading(true);
                menuList.value.children[i].classList.add('activeMenu');//改变item颜色
                menuRecord.value = index;//记录上一次点击的item
            }
        }
    }
    next();
    await nextTick();
    // 关闭加载动画（保持原逻辑）
    setTimeout(() => {
    admMenuLoading.setMenuLoading(false);
    }, 300);
});
//每次页面刷新时，默认加载第一个菜单的路由
onMounted(() => {
    router.push(menuData.value[0].route);
})
</script>

<template>
    <div class="comMenuBar">
        <div class="content">
            <!-- 占位元素 -->
            <div class="placeHolder"></div>
            <!-- 菜单内容元素 -->
            <div class="menuContent">
                <ul ref="menuList">
                    <li
                    v-for="(item,index) in menuData"
                    :key="index"
                    @click="menuClick(index)"
                    :class="index === 0 ? 'activeMenu' : ''"
                    >
                        <span class="iconfont" :class="item.icon"></span>
                        <span>{{ item.text }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
@use "./fonticon/admMenuBar/iconfont.css";

.comMenuBar {
    width: 12vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #818bbd;
    font-size: 17px;
    font-weight: 500;
    color: white;
    .content{
        width: 100%;
        height: 100%;
        background-color: #b5bbd8;
        border-bottom-left-radius: 30px;
        .placeHolder {
            height: 10vh;
            width: 100%;
        }
        .menuContent {
            width: 100%;
            height: calc(100% - 10vh);
            ul{
                position: relative;
                width: 100%;
                height: 100%;
                li{
                    width: 100%;
                    height: 7vh;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap:10px;
                    background-color: transparent;
                    overflow: hidden;
                    white-space: nowrap;
                    transition: background-color 0.4s ease-in-out;
                    &:hover {
                        background-color: #4c5fbc;
                    }
                }
                //激活状态的背景颜色
                .activeMenu {
                    background-color: #4c5fbc;
                }
            }
        }
    }
}
</style>